<template>
	<view class="menu">
		<view 
			class="menu__item"
			v-for="(item,index) in menuList"
			:key="index"
			@click="itemClick(item, index)"
		>
			<view class="menu__item--icon" :style="{ backgroundColor: item.bgColor }">
				<image :src="item.image"></image>
			</view>
			<text  class="menu__item--label">{{ item.label }}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 目录
	 */
	export default {
		computed: {
			menuList(){
                const tmplIds1 = ['FvFanv-mlFX9CS7I3tM_yTDO4JEJVfswRfkq8W6kDY0', '4iT450iczGWV6NIJpYGJI29MacH_mow4osW77i93DXo', 'T7xzg7UWxZCmvZTA5Sqvz7ecDgednd9jCgeCMQ9L1K0']
                const tmplIds2 = ['QlDKpcImf6HNBqJ9TNvnx0h_aa0Zyw7d-12yvNuGF8k']
				return [
					{ label: this.$t('home.menu.label1'), path: '', bgColor: 'rgba(165, 214, 63, 0.45)', image: uni.$u.$assets.homeMenu1, tmplIds: tmplIds1 },
					{ label: this.$t('home.menu.label2'), path: '', bgColor: 'rgba(255, 141, 26, 0.45)', image: uni.$u.$assets.homeMenu2, tmplIds: tmplIds1 },
					{ label: this.$t('home.menu.label3'), path: '', bgColor: 'rgba(90, 114, 250, 0.45)', image: uni.$u.$assets.homeMenu3, tmplIds: tmplIds1 },
					{ label: this.$t('home.menu.label4'), path: '', bgColor: 'rgba(0, 186, 173, 0.45)', image: uni.$u.$assets.homeMenu4, tmplIds: tmplIds2 }
				]
			}
		},
		methods: {
			itemClick({ path, tmplIds }) {
                // 小程序订阅消息请求
                this.$u.func.requestSubscribeMessage(tmplIds)
				this.$u.route(path)
			}
		}
	}
</script>

<style lang="scss" scoped>
.menu{
	overflow: hidden;
	
	&__item{
		display: flex;
		flex-direction: column;
		align-items: center;
		float: left;
		width: 25%;
		margin-top: 32rpx;
		
		&--icon{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 106rpx;
			height: 109rpx;
			border-radius: 100rpx;
			background: rgba(165, 214, 63, 0.45);
			
			image{
				width: 65rpx;
				height: 65rpx;
			}
		}
		
		&--label{
			margin-top: 10rpx;
			font-size: 20rpx;
			font-weight: 300;
			letter-spacing: 0rpx;
			line-height: 27.44rpx;
			color: rgba(56, 56, 56, 1);
			vertical-align: top;
			text-align: center;
		}
	}
}
</style>
